<script setup>
import HomePanel from './HomePanel.vue'
import GoodsItem from '@/components/GoodsItem.vue'
import { getGoodsAPI } from '@/apis/home'
import { ref, onMounted } from 'vue'
const goods = ref([])
onMounted(() => {
	(async () => {
		const res = await getGoodsAPI().then(res => res.data)
		goods.value = res.result
	})()
})

</script>
<template>
	<div class="home-product">
		<HomePanel :title="item.name" v-for="item in goods" :key="item.id">
			<div class="box">
				<router-link class="cover" to="/">
					<img v-img-lazy="item.picture" alt="">
					<div class="label">
						<span>{{ item.name }}馆</span>
						<span>{{ item.saleInfo }}</span>
					</div>
				</router-link>
				<ul class="goods-list">
					<li v-for="i in item.goods.slice(0, 8)" :key="i.id">
						<GoodsItem :goods="i" />
					</li>
				</ul>
			</div>
		</HomePanel>
	</div>
</template>
<style scoped lang="scss">
.home-product {
	background: #fff;
	margin-top: 20px;
	padding-bottom: 20px;
	.box {
		// height: 610px;
		&::after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.cover {
			float: left;
			display: block;
			width: 240px;
			height: 610px;
			position: relative;

			img {
				width: 100%;
				height: 100%;
			}

			.label {
				width: 188px;
				height: 66px;
				line-height: 66px;
				font-size: 18px;
				background: rgba(0, 0, 0, 0.7);
				color: #fff;
				position: absolute;
				left: 0;
				top: 50%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				span {
					margin-left: 10px;
				}
			}
		}

		.goods-list {
			display: flex;
			flex-wrap: wrap;
			margin-left: 20px;
		}
	}
}
</style>